/* 字体图标样式引入 */
@import url('../font/iconfont.css');

/* 字体大小 */
html {
    font-size: 62.5% !important;
    /* 取默认字体的百分比 */
}

body,
b,
strong,
.caption {
    line-height: 160%;
    overflow-x: hidden;
}

@media (min-width: 992px) {
    html {
        font-size: 62.5%;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 59%;
    }
}

@media (min-width: 576px) {
    html {
        font-size: 56%
    }
}

a:hover {
    text-decoration: none;
}

/* 左边栏 */
#leftMennu,
#leftClickChangeMenu {
    top: 0;
    left: 0;
}

#leftMennu header,
#leftClickChangeMenu header {
    height: 80px;
}

#leftClickChangeMenu .footerClause {
    height: 50px;
}

#leftMennu .login {
    height: calc(100vh - 80px);
}

#leftClickChangeMenu {
    opacity: 1;
    transform: scale(1);
    height: 100vh;
}

#leftClickChangeMenu #ClickMenu {
    height: calc(100vh - 140px);
    overflow-y: auto;
}

@media all and (max-width: 991.98px) {
    #leftMennu {
        position: relative !important;
    }

    #leftMennu .login {
        height: auto
    }

    #leftClickChangeMenu {
        width: 100%;
        z-index: 1000;
    }
}

#leftMennu .navbar .iconfont,
#leftClickChangeMenu header .iconfont {
    font-size: 2rem;
    cursor: pointer;
}

#leftMennu #menuIntroduce .iconfont.icon-kafei {
    font-size: 3rem;
}

#leftMennu #menuIntroduce .iconfont.icon-denglu-copy,
#leftClickChangeMenu #ClickMenu .iconfont.icon-denglu-copy {
    font-size: 1rem;
}

#leftMennu #menuIntroduce button.button-customize,
#leftClickChangeMenu #ClickMenu button.button-customize {
    border-radius: 15px;
}

#leftClickChangeMenu #ClickMenu #MenuIntroduce {
    font-size: 1.8rem;
}

#leftClickChangeMenu {
    transition: all 0.2s;
}

#leftClickChangeMenu.hide {
    opacity: 0;
    transform: scale(2);
    z-index: -1;
}




/* 轮播图控件 图标 样式 */
#starbucksMainTopCarousel .iconfont {
    font-size: 2.2rem;
    color: #ccc;
}

#starbucksMainTopCarousel .carousel-indicators-color li {
    background-color: #ccc;
}

/* 列表图片展示 hover样式 | 星巴克精选列表样式 | 咖啡星讲堂列表样式 */
@media all and (min-width: 576px) {

    #img-show-row div:hover,
    #chosenListItem:hover,
    #classroomList .card:hover {
        transform: translate3d(0, -4px, 0);
    }
}

#img-show-row div,
#chosenListItem,
#classroomList .card,
#classroomList ul li {
    transition: all 0.2s ease-in-out;
}

#img-show-row div:hover a img,
#chosenListItem:hover,
#classroomList .card:hover {
    box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.12);
}

/* 星享俱乐部样式 | 星巴克精选样式 | 咖啡星讲堂列表样式*/
#clubIntroduce h2,
#chosenIntroduce h2,
#classroomIntroduce h2 {
    font-size: 2.2rem;
}

#clubIntroduce p,
#clubIntroduce button,
#chosenIntroduce p,
#chosenList h3,
#classroomIntroduce p,
#classroomList .card h3 {
    font-size: 1.6rem;
    line-height: 2;
}

#clubIntroduce a.text-customize-golden,
#chosenList p.text-customize-golden {
    color: #C2A661;
}

#clubIntroduce button.button-customize {
    border-radius: 48px;
}

/* 星巴克精选列表样式 */
#chosenListItem img {
    margin-top: -48px;
    height: 72px;
}

#chosenListItem p {
    font-size: 1.4rem;
    line-height: 1.4;
}

/* 咖啡星讲堂列表样式 */
#classroomList ul {
    overflow: hidden;
}

#classroomList ul .card span.customize-mark {
    font-size: 1.4rem;
    background: #C2A661;
    left: 0;
    top: 6px;
}

#classroomList .card .card-img-top {
    height: 160px;
}

#classroomList .customize-control-next,
#classroomList .customize-control-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: #fff;
    text-align: center;
    opacity: .5;
    transition: opacity .15s ease;
    font-size: 4rem;
    cursor: pointer;
}

#classroomList .customize-control-next {
    right: 10px;
}

#classroomList .customize-control-prev {
    left: 10px
}

#classroomList .customize-control-next::before,
#classroomList .customize-control-prev::before {
    background-color: red;
    height: 50px;
    width: 50px;
    display: block;
    line-height: 50px;
    border-radius: 50%;
    background-color: #C2A661;
}

/* 备案号样式 */
#index-footer img {
    width: 15px;
}

#index-footer a {
    font-size: 14px;
}

/* 底部菜单样式 */
#footerMenu .iconfont {
    font-size: 1.8rem;
}

#footerMenu a.active {
    color: #00A862 !important;
}